<template>
  <div class="app">
    <div class="bar">
      <div style="height: 3rem"></div>
      <van-nav-bar :fixed="true" title="首页" left-text="返回" left-arrow @click-left="returnPage" @click-right="editArticleInfo">
        <template #right>
          <van-icon name="add-o" size="18" />
        </template>
      </van-nav-bar>
    </div>
    <div class="homeContext" v-if="!loading">
      <div class="swipe">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white" lazy-render>
          <van-swipe-item v-for="image in images" :key="image.id" @click="imageClick(image.articleInfoId)">
            <img :src="image.url" />
          </van-swipe-item>
        </van-swipe>
      </div>

      <div class="grid">
        <van-grid square :column-num="3">
          <van-grid-item v-for="grid in grids" :key="grid.id" :icon="grid.icon" :text="grid.text" />
        </van-grid>
      </div>

      <div class="cell">
        <!-- <van-cell-group>
          <van-card v-for="homeCell in homeCells" :key="homeCell.id" :desc="homeCell.desc" :title="homeCell.title" :thumb="homeCell.thumb" />
        </van-cell-group> -->
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh" :disabled="disabled">
          <van-list v-model="listLoading" :finished="finished" finished-text="没有更多了" @load="onLoad" :immediate-check="false">
            <ArticleComponent :articles="articles" :type="0"></ArticleComponent>
          </van-list>
        </van-pull-refresh>
      </div>
      <div style="height: 3rem"></div>
    </div>
    <div v-else>
      <content-loader :height="1170" :width="580">
        <rect x="0" y="0" rx="3" ry="3" width="580" height="300" />
        <rect x="10" y="310" rx="3" ry="3" width="180" height="180" />
        <rect x="200" y="310" rx="3" ry="3" width="180" height="180" />
        <rect x="390" y="310" rx="3" ry="3" width="180" height="180" />
        <rect x="10" y="500" rx="3" ry="3" width="180" height="180" />
        <rect x="200" y="500" rx="3" ry="3" width="180" height="180" />
        <rect x="390" y="500" rx="3" ry="3" width="180" height="180" />
        <rect x="0" y="690" rx="3" ry="3" width="580" height="150" />
        <rect x="0" y="850" rx="3" ry="3" width="580" height="150" />
        <rect x="0" y="1010" rx="3" ry="3" width="580" height="150" />
      </content-loader>
    </div>
  </div>
</template>

<script>
import { ContentLoader } from 'vue-content-loader'
import { Toast } from 'vant'
import ArticleComponent from '@/components/ArticleComponent.vue'
import requestApi from '@/utils/request.js'

export default {
  name: 'HomeComponent',
  components: {
    ContentLoader,
    ArticleComponent
  },
  data() {
    return {
      images: [],
      // 加载位图的标志位
      loading: true,
      homeArticlesStartPageNum: 1,
      listLoading: false,
      finished: false,
      refreshing: false,
      disabled: false,
      articles: [
        {
          id: 1,
          articleDesc:
            'Vue.js 是一个流行的 JavaScript 前端框架，它采用了一种响应式的数据绑定机制，使得应用状态的管理变得简单而直观。Vue.js 的核心思想是将应用程序分解成组件，每个组件都拥有自己的状态和行为，并且可以嵌套在其他组件中。Vue.js 还提供了丰富的工具和插件，使得开发者可以更轻松地构建交互式用户界面。',
          title: '文章标题',
          thumb: 'https://img01.yzcdn.cn/vant/cat.jpeg',
          author: '张三',
          tagNames: [
            {
              id: 1,
              tagName: 'Java'
            },
            {
              id: 2,
              tagName: 'Spring'
            }
          ],
          commentNum: 10,
          releaseData: '2023-08-02'
        },
        {
          id: 2,
          articleDesc:
            'Vue.js 是一个流行的 JavaScript 前端框架，它采用了一种响应式的数据绑定机制，使得应用状态的管理变得简单而直观。Vue.js 的核心思想是将应用程序分解成组件，每个组件都拥有自己的状态和行为，并且可以嵌套在其他组件中。Vue.js 还提供了丰富的工具和插件，使得开发者可以更轻松地构建交互式用户界面。',
          title: '文章标题',
          thumb: 'https://img01.yzcdn.cn/vant/cat.jpeg',
          author: '张三',
          tagNames: [
            {
              id: 1,
              tagName: 'Java'
            },
            {
              id: 2,
              tagName: 'Spring'
            }
          ],
          commentNum: 10,
          releaseData: '2023-08-02'
        },
        {
          id: 3,
          articleDesc:
            'Vue.js 是一个流行的 JavaScript 前端框架，它采用了一种响应式的数据绑定机制，使得应用状态的管理变得简单而直观。Vue.js 的核心思想是将应用程序分解成组件，每个组件都拥有自己的状态和行为，并且可以嵌套在其他组件中。Vue.js 还提供了丰富的工具和插件，使得开发者可以更轻松地构建交互式用户界面。',
          title: '文章标题',
          thumb: 'https://img01.yzcdn.cn/vant/cat.jpeg',
          author: '张三',
          tagNames: [
            {
              id: 1,
              tagName: 'Java'
            },
            {
              id: 2,
              tagName: 'Spring'
            }
          ],
          commentNum: 10,
          releaseData: '2023-08-02'
        },
        {
          id: 4,
          articleDesc:
            'Vue.js 是一个流行的 JavaScript 前端框架，它采用了一种响应式的数据绑定机制，使得应用状态的管理变得简单而直观。Vue.js 的核心思想是将应用程序分解成组件，每个组件都拥有自己的状态和行为，并且可以嵌套在其他组件中。Vue.js 还提供了丰富的工具和插件，使得开发者可以更轻松地构建交互式用户界面。',
          title: '文章标题',
          thumb: 'https://img01.yzcdn.cn/vant/cat.jpeg',
          author: '张三',
          tagNames: [
            {
              id: 1,
              tagName: 'Java'
            },
            {
              id: 2,
              tagName: 'Spring'
            }
          ],
          commentNum: 10,
          releaseData: '2023-08-02'
        }
      ],
      grids: [
        {
          id: 1,
          text: '精选文章',
          icon: 'fire-o'
        },
        {
          id: 2,
          text: '我的收藏',
          icon: 'like-o'
        },
        {
          id: 3,
          text: '高赞文章',
          icon: 'thumb-circle-o'
        },
        {
          id: 4,
          text: '文章分类',
          icon: 'award-o'
        },
        {
          id: 5,
          text: '文章推荐',
          icon: 'flower-o'
        },
        {
          id: 6,
          text: '排行榜',
          icon: 'bar-chart-o'
        }
      ]
    }
  },
  created() {
    this.getImages(this)
    this.getGrids(this)
    this.getHomeArticles(this)
  },
  methods: {
    returnPage() {
      this.$router.back()
    },
    // 点击首页额轮播图
    imageClick(articleInfoId) {
      this.$router.push('/info/' + articleInfoId)
    },
    // list触底事件
    onLoad() {
      this.getHomeArticles(this)
    },
    // 下拉刷新事件
    onRefresh() {
      // 将 loading 设置为 true，表示处于加载状态
      this.listLoading = true
      this.onLoad()
    },
    // 新增文章
    editArticleInfo() {
      this.$router.push('/edit')
    },
    getImages(then) {
      // 获取图片信息
      requestApi
        .get('getImages')
        .then(function (response) {
          const req = response.data
          if (req.code === 0) {
            then.images = req.data
            then.loading = false
          }
        })
        .catch(function (error) {
          console.log(error)
          Toast.fail('加载图片错误')
        })
    },
    getGrids(then) {
      // 获取单元信息
      requestApi
        .get('getGrids')
        .then(function (response) {
          const req = response.data
          if (req.code === 0) {
            then.grids = req.data
            then.loading = false
          }
        })
        .catch(function (error) {
          console.log(error)
          Toast.fail('加载单元菜单错误')
        })
    },
    getHomeArticles(then) {
      // 获取图片信息
      requestApi
        .get('getHomeArticles', {
          params: {
            pageNumber: then.homeArticlesStartPageNum,
            pageSize: 10
          }
        })
        .then(function (response) {
          const req = response.data
          if (req.code === 0) {
            // 第一次加载直接赋值
            if (req.data.isFirstPage) {
              then.articles = req.data.list
            } else {
              if (then.refreshing) {
                // 非第一次加载 合并处理数据
                then.articles = [...req.data.list, ...then.articles]
                // 加载状态结束
                then.listLoading = false
                then.refreshing = false
              } else {
                then.articles = [...then.articles, ...req.data.list]
                then.loading = false
              }
            }
            then.homeArticlesStartPageNum = req.data.nextPage

            // 是否是最后一页
            if (req.data.isLastPage) {
              then.finished = true
              then.disabled = true
            }
          } else {
            Toast.fail(req.msg)
            then.listLoading = false
            then.finished = true
            then.disabled = true
          }
        })
        .catch(function (error) {
          console.log(error)
          Toast.fail('加载首页文章错误')
        })
    }
  }
}
</script>

<style lang="less" scoped>
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  background-color: #fff;
  width: 100%;
  height: 150px;
  text-align: center;
}

.my-swipe .van-swipe-item img {
  max-width: 100%;
  max-height: 100%;
}

.van-card {
  position: relative;
  box-sizing: border-box;
  padding: 8px 16px;
  color: #323233;
  font-size: 12px;
  background-color: #fff;
}
</style>
